{"version":3,"file":"component---src-pages-help-first-tsx-809b086afd1de347104f.js","mappings":"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","sources":["webpack://beaver-help/./src/components/atoms/commonH3.tsx","webpack://beaver-help/./src/components/molecules/categoryCard.tsx","webpack://beaver-help/./src/hooks/useHelpData.ts","webpack://beaver-help/./src/pages/help/first.tsx"],"sourcesContent":["import styled from '@emotion/styled'\nimport React from 'react'\n\nconst H3 = styled.h3`\n  font-size: 1em;\n  margin: 0 0 15px;\n  border: none;\n  display: inline-block;\n  span {\n    margin: 0 0 3px;\n    display: inline-block;\n    position: relative;\n    border-bottom: solid 2px #e5e5e5;\n    &:before {\n      position: absolute;\n      bottom: -2px;\n      left: 0;\n      width: 16px;\n      height: 2px;\n      content: '';\n      background: #3ec7b3;\n    }\n  }\n`\n\ntype Props = {\n  /** クラス名 */\n  className?: string\n  /** タイトル */\n  label: string\n}\n\n/**\n * 共通H3タグ\n * @param props\n * @constructor\n */\nconst CommonH3 = (props: Props): JSX.Element => {\n  const { className = '' } = props\n\n  return (\n    <H3 className={className}>\n      <span>{props.label}</span>\n    </H3>\n  )\n}\n\nexport default CommonH3\n","import styled from '@emotion/styled'\nimport { Link } from 'gatsby'\nimport React from 'react'\nimport useHelpData from '../../hooks/useHelpData'\nimport CommonH3 from '../atoms/commonH3'\nimport BreakPoints from '../../styles/breakPoints'\nimport useRouteParam from '../../hooks/useRouteParam'\n\nconst Wrapper = styled.div`\n  background: #ffffff;\n  border-radius: 10px;\n  padding: 25px 30px;\n  width: 500px;\n  min-height: 276px;\n  margin: 15px;\n  float: left;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n\n  h3 {\n    span {\n      font-size: 1.6em;\n      border: none;\n\n      &:before {\n        display: none;\n      }\n    }\n  }\n\n  .category-list {\n    li {\n      margin: 0 0 5px 15px;\n      position: relative;\n\n      &:before {\n        display: block;\n        content: '';\n        position: absolute;\n        width: 0;\n        height: 0;\n        top: 7px;\n        left: -14px;\n        border-left: 8px solid #3ec7b3;\n        border-top: 3px solid transparent;\n        border-bottom: 3px solid transparent;\n      }\n\n      a {\n        max-width: 100%;\n        // overflow: hidden;\n        // text-overflow: ellipsis;\n        // white-space: nowrap;\n        display: inline-block;\n      }\n    }\n  }\n\n  .all-link {\n    display: block;\n    width: fit-content;\n    margin: 0 0 0 auto;\n    text-align: right;\n    color: #00b5a6;\n  }\n\n  @media screen and (max-width: 1074px) {\n    margin: 15px auto;\n    width: 80vw;\n    float: unset;\n    min-height: unset;\n  }\n\n  ${BreakPoints.large} {\n    width: calc(100vw - 45px);\n  }\n\n  ${BreakPoints.medium} {\n    width: calc(100vw - 20px);\n    padding: 15px 15px 15px 5px;\n  }\n}\n`\ntype IProps = {\n  /** カテゴリタイトル */\n  categoryTitle: string\n  /** URL */\n  slug: string\n  /** カテゴリID */\n  helpCategoryId: string\n  /** ページタイトル */\n  limit: number\n  /** すべての記事を表示フラグ */\n  visibleAllLink?: boolean\n}\n\n/**\n * カテゴリカード\n * @constructor\n */\nconst CategoryCard = ({\n  categoryTitle,\n  slug,\n  helpCategoryId,\n  limit,\n  visibleAllLink,\n}: IProps) => {\n  const { helpDetails } = useHelpData()\n  const fixDetails = helpDetails.filter(\n    (val) => val.helpCategoryId.split(',').indexOf(helpCategoryId) !== -1\n  )\n  const morePage = limit < fixDetails.length\n  return (\n    <Wrapper className=\"category-card\">\n      <CommonH3 label={categoryTitle} className=\"category-title\" />\n      <ul className=\"category-list\">\n        {fixDetails.splice(0, limit).map((item) => (\n          <li key={`article-${item.helpId}`}>\n            <Link to={useRouteParam(`/help/article/${item.helpId}`)}>\n              {item.title}\n            </Link>\n          </li>\n        ))}\n      </ul>\n      {visibleAllLink && morePage && (\n        <Link to={useRouteParam(`/help/${slug}`)} className=\"all-link\">\n          <span itemProp=\"headline\">すべての記事を表示</span>\n        </Link>\n      )}\n    </Wrapper>\n  )\n}\n\nexport default CategoryCard\n","import { graphql, useStaticQuery } from 'gatsby'\nimport { useMemo } from 'react'\nimport { CategoryKindType } from '../types/CategoryKind'\n\nexport type IHelpCategory = {\n  /** ヘルプカテゴリID */\n  helpCategoryId: string\n  /** カテゴリ種別 */\n  categoryKind: CategoryKindType\n  /** タイトル */\n  title: string\n  /** スラッグ */\n  slug: string\n}\n\nexport type IHelpCategoryMap = {\n  [helpCategoryId: string]: IHelpCategory\n}\n\nexport type IHelpDetail = {\n  /** ヘルプID */\n  helpId: string\n  /** ソート番号 */\n  sortNo: number\n  /** カテゴリID */\n  helpCategoryId: string\n  /** タイトル */\n  title: string\n  /** スラッグ */\n  slug: string\n}\n\ntype IReturn = {\n  helpCategoryMap: IHelpCategoryMap\n  helpDetails: IHelpDetail[]\n}\n/**\n * ヘルプ情報共通フック\n */\nconst useHelpData = (): IReturn => {\n  const { awsGraphQL } = useStaticQuery<GatsbyTypes.useHelpDataQuery>(\n    graphql`\n      query useHelpData {\n        awsGraphQL {\n          listHelpDetails {\n            items {\n              helpId\n              title\n              sortNo\n              helpCategoryId\n              _deleted\n            }\n          }\n          listHelpCategories {\n            items {\n              helpCategoryId\n              categoryKind\n              title\n              slug\n              _deleted\n            }\n          }\n        }\n      }\n    `\n  )\n\n  const detailItems = awsGraphQL.listHelpDetails?.items || []\n  const categoryItems = awsGraphQL.listHelpCategories?.items || []\n\n  // ヘルプカテゴリIDがキーのマップ情報を作成\n  const helpCategoryMap = useMemo(\n    () =>\n      categoryItems.reduce<IHelpCategoryMap>(\n        // eslint-disable-next-line no-shadow\n        (result, data) => {\n          if (data?._deleted) return result\n          return {\n            ...result,\n            [data?.helpCategoryId || '']: {\n              helpCategoryId: data?.helpCategoryId || '',\n              categoryKind: data?.categoryKind as CategoryKindType,\n              title: data?.title || '',\n              slug: data?.slug || '',\n            },\n          }\n        },\n        {}\n      ),\n    [categoryItems]\n  )\n\n  // ヘルプIDがキーの詳細マップ情報を作成\n  const helpDetails = useMemo(() => {\n    const _result: IHelpDetail[] = []\n    detailItems.forEach((helpDetail) => {\n      if (helpDetail?._deleted) return\n      const _helpCategoryIds = (helpDetail?.helpCategoryId || '').split(',')\n      const _helpId = helpDetail?.helpId || ''\n      _helpCategoryIds.forEach((_helpCategoryId) => {\n        if (helpCategoryMap[_helpCategoryId]) {\n          const category = helpCategoryMap[_helpCategoryId]\n          _result.push({\n            helpId: _helpId,\n            title: helpDetail?.title || '',\n            sortNo: helpDetail?.sortNo || 999999,\n            helpCategoryId: _helpCategoryId,\n            slug: category.slug,\n          })\n        }\n      })\n    })\n    _result.sort((a, b) => a.sortNo - b.sortNo)\n    return _result\n  }, [helpCategoryMap, detailItems])\n\n  return { helpCategoryMap, helpDetails }\n}\n\nexport default useHelpData\n","import { graphql, PageProps } from 'gatsby'\nimport React from 'react'\nimport CommonH2 from '../../components/atoms/commonH2'\nimport SEO from '../../components/atoms/seo'\nimport { ITopicPath } from '../../components/atoms/topicPath'\nimport CategoryCard from '../../components/molecules/categoryCard'\nimport Layout from '../../components/organisms/layout'\nimport { CategoryKind } from '../../types/CategoryKind'\nimport ManualBtn from '../../components/molecules/manualBtn'\nimport useRouteParam from '../../hooks/useRouteParam'\n\ntype IProps = PageProps<GatsbyTypes.HelpIndexPageQuery>\n\n/**\n * はじめてガイドページ\n * @constructor\n */\nconst FirstPage = ({ data, location }: IProps) => {\n  // GraphQLで取得したデータを保持\n  const items = data.awsGraphQL.listHelpCategories?.items || []\n\n  const paths: ITopicPath[] = [\n    { title: 'TOP', link: useRouteParam('/help') },\n    { title: 'はじめてガイド' },\n  ]\n  return (\n    <Layout location={location} paths={paths} categoryKind={CategoryKind.FIRST}>\n      <SEO title=\"はじめてガイド\" />\n      <CommonH2 label=\"はじめてガイド\" />\n      <p className=\"txt-center mt-020 mb-020\">\n        キンクラを初めてご利用いただく際に読んでいただきたい、基本操作をご案内します。\n      </p>\n      {[...items]\n        .sort((a, b) => (a?.sortNo || 0) - (b?.sortNo || 0))\n        .filter((item) => !item?._deleted)\n        .map((item) => {\n          const helpCategoryId = item?.helpCategoryId || ''\n          const slug = item?.slug || ''\n          const title = item?.title || ''\n          return (\n            <CategoryCard\n              key={`category-card-${helpCategoryId}`}\n              helpCategoryId={helpCategoryId}\n              categoryTitle={title}\n              slug={slug}\n              limit={10}\n              visibleAllLink\n            />\n          )\n        })}\n      <div className=\"manual-button\">\n        <ManualBtn />\n      </div>\n    </Layout>\n  )\n}\n\nexport default FirstPage\n\nexport const pageQuery = graphql`\n  query items {\n    awsGraphQL {\n      listHelpCategories(filter: { categoryKind: { eq: 1 } }) {\n        items {\n          helpCategoryId\n          sortNo\n          title\n          slug\n          categoryKind\n          _deleted\n        }\n      }\n    }\n    site {\n      siteMetadata {\n        title\n      }\n    }\n  }\n`\n"],"names":["H3","props","className","label","Wrapper","BreakPoints","categoryTitle","slug","helpCategoryId","limit","visibleAllLink","fixDetails","useHelpData","helpDetails","filter","val","split","indexOf","morePage","length","splice","map","item","key","helpId","Link","to","useRouteParam","title","itemProp","awsGraphQL","useStaticQuery","detailItems","listHelpDetails","items","categoryItems","listHelpCategories","helpCategoryMap","useMemo","reduce","result","data","_deleted","categoryKind","_result","forEach","helpDetail","_helpCategoryIds","_helpId","_helpCategoryId","category","push","sortNo","sort","a","b","location","paths","link","CategoryKind"],"sourceRoot":""}