@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-7

package/src/components/atoms/uploader/index.tsx

@@ -0,0 +1,107 @@
+import React from 'react'
+
+import { Button } from '../button'
+import {
+  StyledDefaultButtonContent,
+  StyledElementContainer,
+  StyledIconWrapper,
+  StyledUploader,
+} from './index.styled'
+
+export type Props = {
+  type: 'badge' | 'button'
+  onFileSelected: (f: FileList) => void
+  inputId: string
+  withIcon?: JSX.Element
+  multiple?: boolean
+  fileAcceptType?: string
+  withElement?: JSX.Element
+  value?: string
+  className?: string
+}
+
+const Uploader = ({
+  type,
+  withIcon,
+  onFileSelected,
+  inputId,
+  withElement,
+  fileAcceptType,
+  multiple,
+  value,
+  className,
+}: Props) => {
+  const onClick = () => {
+    ;(document.querySelector(
+      '#uploader-input-' + inputId,
+    ) as HTMLElement)?.click()
+  }
+
+  const getBadge = () => (
+    <StyledElementContainer
+      onClick={onClick}
+      data-is-attached-to-element={!!withElement}
+    >
+      {withElement}
+      <StyledIconWrapper data-is-attached-to-element={!!withElement}>
+        {withIcon}
+      </StyledIconWrapper>
+    </StyledElementContainer>
+  )
+
+  const getButton = () =>
+    withElement ? (
+      <div onClick={onClick}>{withElement}</div>
+    ) : (
+      <Button
+        size="md"
+        color="secondary"
+        className="default-button"
+        icon={withIcon}
+        onClick={onClick}
+      >
+        <StyledDefaultButtonContent>
+          <svg
+            id="prefix__Layer_1"
+            data-name="Layer 1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 13.5 13.5"
+          >
+            <defs>
+              <style>
+                {
+                  '.prefix__cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}'
+                }
+              </style>
+            </defs>
+            <title>{'upload'}</title>
+            <path
+              className="prefix__cls-1"
+              d="M14 10v2.67A1.33 1.33 0 0112.67 14H3.33A1.33 1.33 0 012 12.67V10M11.33 5.33L8 2 4.67 5.33M8 2v8"
+              transform="translate(-1.25 -1.25)"
+            />
+          </svg>
+          {'Upload Image'}
+        </StyledDefaultButtonContent>
+      </Button>
+    )
+
+  return (
+    <StyledUploader className={className}>
+      {type === 'badge' ? getBadge() : getButton()}
+      <input
+        id={'uploader-input-' + inputId}
+        accept={fileAcceptType}
+        multiple={multiple}
+        type="file"
+        style={{ display: 'none' }}
+        onChange={(e) => {
+          onFileSelected(e.target.files)
+        }}
+        value={value}
+      />
+    </StyledUploader>
+  )
+}
+
+export { Uploader }

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './atoms'
+export * from './molecules'
+export * from './organisms'

package/src/components/molecules/ampNextPage/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+export type AmpNextArticleItem = {
+  title: string
+  image: string
+  link: string
+}
+
+export type Props = {
+  ampNextArticles?: AmpNextArticleItem[]
+}
+
+const AmpNextPage = ({ ampNextArticles }: Props) => {
+  const filteredAmpArticles = ampNextArticles?.filter(Boolean) || []
+  if (!filteredAmpArticles?.length) return null
+  const customAttribute = { separator: '' }
+  return (
+    <amp-next-page>
+      <script
+        type="application/json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(
+            filteredAmpArticles.map((ampArticle) => ({
+              image: ampArticle.image || '',
+              title: ampArticle.title ? JSON.stringify(ampArticle.title) : '',
+              url: ampArticle.link || '',
+            })),
+          ),
+        }}
+      ></script>
+      <div
+        {...customAttribute}
+        className="amp-page-seperator"
+        style={{
+          color: '#8C8C8C',
+          textTransform: 'uppercase',
+          fontSize: 11,
+          fontWeight: 700,
+          marginLeft: 16,
+        }}
+      >
+        Next article:
+      </div>
+    </amp-next-page>
+  )
+}
+
+export { AmpNextPage }

package/src/components/molecules/articleCard/index.stories.tsx

@@ -0,0 +1,222 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+
+import { ArticleCard, Props } from './index'
+
+export default {
+  component: ArticleCard,
+  title: 'Molecules/ArticleCard',
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+}
+
+const Template: Story<Props> = (args) => <ArticleCard {...args} />
+
+export const HomeTrendingLarge = Template.bind({})
+
+HomeTrendingLarge.args = {
+  banner: <img src="https://source.unsplash.com/random/200x200" />,
+  hasAffiliate: true,
+  size: 'lg',
+  direction: 'vertical',
+  isMobile: true,
+  section: 'home',
+  label: 'category name',
+  styleLabel: { color: '#008C50' },
+  title: 'Article Title',
+  text:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim',
+  avatarImg: <img src="https://source.unsplash.com/random/32x32" />,
+  authorName: 'Doctor’s',
+  uploadTime: 'Updated time',
+  categoryName: 'Polar Bears',
+}
+
+export const HomeTrendingMedium = Template.bind({})
+
+HomeTrendingMedium.args = {
+  banner: <img src="https://source.unsplash.com/random/200x200" />,
+  hasAffiliate: true,
+  size: 'md',
+  direction: 'vertical',
+  isMobile: false,
+  section: 'home',
+  label: 'category name',
+  styleLabel: { color: '#008C50' },
+  title:
+    'Article Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra',
+  // text:
+  //   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim',
+  avatarImg: <img src="https://source.unsplash.com/random/32x32" />,
+  authorName: 'Doctor’s',
+  uploadTime: 'Updated time',
+  categoryName: 'Polar Bears',
+}
+
+export const HomeTrendingSmall = Template.bind({})
+
+HomeTrendingSmall.args = {
+  banner: <img src="https://source.unsplash.com/random/200x200" />,
+  hasAffiliate: true,
+  size: 'sm',
+  direction: 'horizontal',
+  isMobile: false,
+  section: 'home',
+  label: 'category name',
+  styleLabel: { color: '#008C50' },
+  title:
+    'Article Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra',
+  text:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim',
+  avatarImg: <img src="https://source.unsplash.com/random/32x32" />,
+  authorName: 'Doctor’s',
+  uploadTime: 'Updated time',
+  categoryName: 'Polar Bears',
+}
+
+export const HomeFeaturedSmall = Template.bind({})
+
+HomeFeaturedSmall.args = {
+  banner: <img src="https://source.unsplash.com/random/200x200" />,
+  hasAffiliate: true,
+  size: 'sm',
+  direction: 'horizontal',
+  isMobile: false,
+  section: 'home',
+  label: 'category name',
+  styleLabel: { color: '#008C50' },
+  title:
+    'Article Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra',
+  text:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim',
+  avatarImg: <img src="https://source.unsplash.com/random/32x32" />,
+  authorName: 'Doctor’s',
+  uploadTime: 'Updated time',
+  categoryName: 'Polar Bears',
+}
+
+export const HomeExpertLarge = Template.bind({})
+
+HomeExpertLarge.args = {
+  banner: <img src="https://source.unsplash.com/random/200x200" />,
+  hasAffiliate: true,
+  size: 'lg',
+  direction: 'vertical',
+  isMobile: true,
+  section: 'home',
+  type: 'expert',
+  label: 'category name',
+  styleLabel: { color: '#008C50' },
+  title:
+    'Article Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra',
+  // text:
+  //   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim',
+  avatarImg: <img src="https://source.unsplash.com/random/32x32" />,
+  authorName: 'Doctor’s',
+  uploadTime: 'Updated time',
+  categoryName: 'Polar Bears',
+  specialty: 'specialty',
+}
+
+export const HomeExpertMedium = Template.bind({})
+
+HomeExpertMedium.args = {
+  banner: <img src="https://source.unsplash.com/random/200x200" />,
+  hasAffiliate: true,
+  size: 'md',
+  direction: 'horizontal',
+  isMobile: false,
+  section: 'home',
+  type: 'expert',
+  label: 'category name',
+  styleLabel: { color: '#008C50' },
+  title:
+    'Article Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra',
+  // text:
+  //   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim',
+  avatarImg: <img src="https://source.unsplash.com/random/32x32" />,
+  authorName: 'Doctor’s',
+  uploadTime: 'Updated time',
+  categoryName: 'Polar Bears',
+  specialty: 'specialty',
+}
+
+export const HomeExpertMobileSmall = Template.bind({})
+
+HomeExpertMobileSmall.args = {
+  banner: <img src="https://source.unsplash.com/random/200x200" />,
+  hasAffiliate: true,
+  size: 'sm',
+  direction: 'horizontal',
+  isMobile: true,
+  section: 'home',
+  type: 'expert',
+  label: 'category name',
+  styleLabel: { color: '#008C50' },
+  title:
+    'Article Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra',
+  // text:
+  //   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim',
+  avatarImg: <img src="https://source.unsplash.com/random/32x32" />,
+  authorName: 'Doctor’s',
+  uploadTime: 'Updated time',
+  categoryName: 'Polar Bears',
+  specialty: 'specialty',
+}
+
+export const HorizontalMedium = Template.bind({})
+
+HorizontalMedium.args = {
+  banner: <img src="https://source.unsplash.com/random/200x200" />,
+  hasAffiliate: true,
+  size: 'md',
+  label: 'category name',
+  styleLabel: { color: '#008C50' },
+  title:
+    'Article Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra',
+  text:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim',
+  avatarImg: <img src="https://source.unsplash.com/random/74x74" />,
+  authorName: 'Doctor’s',
+  uploadTime: 'Updated time',
+  categoryName: 'Polar Bears',
+}
+
+export const VerticalLarge = Template.bind({})
+
+VerticalLarge.args = {
+  banner: <img src="https://source.unsplash.com/random/200x200" />,
+  hasAffiliate: true,
+  size: 'lg',
+  direction: 'vertical',
+  label: 'category name',
+  styleLabel: { color: '#008C50' },
+  title: 'Article Title',
+  text:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim',
+  avatarImg: <img src="https://source.unsplash.com/random/74x74" />,
+  authorName: 'Doctor’s',
+  uploadTime: 'Updated time',
+  categoryName: 'Polar Bears',
+}
+
+export const HasButton = Template.bind({})
+
+HasButton.args = {
+  banner: <img src="https://source.unsplash.com/random/200x200" />,
+  hasAffiliate: true,
+  title: 'Article Title',
+  text:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus quis lacus, ullamcorper pellentesque pharetra, a dignissim',
+  avatarImg: <img src="https://source.unsplash.com/random/74x74" />,
+  authorName: 'Medical reviewed by Doctor’s Name',
+  posterName: 'Written by Author’s Name',
+  uploadTime: 'Updated time',
+  hasButton: true,
+  textButton: 'READ MORE',
+  categoryName: 'Polar Bears',
+}