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

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

@@ -1,107 +0,0 @@
-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

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

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

@@ -1,48 +0,0 @@
-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

@@ -1,222 +0,0 @@
-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',
-}