@times-design-system/components-wordpress 0.1.1-alpha.831 → 0.7.2-alpha.2

package/src/AdContainer/styles.css

@@ -1,58 +0,0 @@
-.ad-inline-container {
-  clear: both;
-  width: 100%;
-  min-height: 283px;
-  margin: 30px 0;
-  box-sizing: content-box;
-  padding: 0 0 10px;
-  border-bottom: 1px solid rgb(78, 78, 78);
-}
-@media (min-width: 768px) and (max-width: 1023px) {
-  .ad-inline-container {
-    min-height: 123px;
-  }
-}
-
-.ad-inline-container .ad-label {
-  border-bottom: 1px solid rgb(78, 78, 78);
-  color: rgb(204, 204, 204);
-  flex: 1 1 100%;
-  font: 14px/17px "TimesDigitalW04-Regular", "TimesDigitalW04-Regular-fallback", serif;
-  letter-spacing: 0.6px;
-  margin: 0 0 10px;
-  padding: 0 0 5px;
-  text-align: center;
-  text-transform: uppercase;
-  display: block;
-}
-
-.ad-header {
-  display: flex;
-  padding-block: 10px 10px;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  max-width: 100%;
-  border-width: 0 0 1px;
-  border-style: solid;
-  border-color: var(--wp--preset--color--grey, #dbdbdb);
-  flex-direction: column;
-}
-.ad-header-wrapper {
-  min-height: 50px;
-  align-items: center;
-  flex: 1 1 0%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-bottom: 0;
-}
-@media (min-width: 768px) {
-  .ad-header-wrapper {
-    min-height: 90px;
-  }
-}
-@media (min-width: 1024px) {
-  .ad-header-wrapper {
-    min-height: 250px;
-  }
-}

package/src/Article/ArticleMetaContainer/ArticleMetaContainer.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import './styles.css';
-
-interface ArticleMetaProps {
-  children?: React.ReactNode;
-}
-
-/** Primary ArticleMeta UI component for user interaction */
-
-export const ArticleMetaContainer: React.FC<ArticleMetaProps> = ({
-  children
-}) => {
-  return <div className="article-meta-container">{children}</div>;
-};

package/src/Article/ArticleMetaContainer/styles.css

@@ -1,151 +0,0 @@
-.video-article-container .video-article-up-next {
-  width: 100%;
-  background-color: rgb(29, 29, 27);
-  position: relative;
-}
-.video-article-container .video-article-up-next * {
-  width: 100%;
-}
-@media (min-width: 1024px) {
-  .video-article-container .video-article-up-next {
-    background-color: unset;
-    flex-shrink: 0;
-    width: 220px;
-    order: 0;
-  }
-}
-@media (min-width: 1320px) {
-  .video-article-container .video-article-up-next {
-    width: 270px;
-  }
-}
-.video-article-container .video-article-up-next .vertical-divider {
-  display: none;
-}
-@media (min-width: 768px) {
-  .video-article-container .video-article-up-next .vertical-divider {
-    position: absolute;
-    display: block;
-    height: 100%;
-    width: 1px;
-    background-color: #222;
-    margin: 0 32px;
-    left: -48px;
-  }
-}
-
-.up-next-articles-container {
-  padding: 20px;
-  position: relative;
-}
-@media (min-width: 768px) {
-  .up-next-articles-container {
-    padding: 24px;
-  }
-}
-@media (min-width: 1024px) {
-  .up-next-articles-container {
-    padding: 0;
-  }
-}
-.up-next-articles-container .up-next-article-image {
-  padding-bottom: 56.25%;
-  position: relative;
-  overflow: hidden;
-  background-color: #333;
-}
-.up-next-articles-container .up-next-article-image picture {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-.up-next-articles-container .up-next-article-image img {
-  max-width: 100%;
-}
-.up-next-articles-container .up-next-articles-overlay {
-  display: none;
-}
-@media (max-width: 1023px) {
-  .up-next-articles-container .up-next-articles-overlay {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    width: 75px;
-    z-index: 1;
-  }
-}
-.up-next-articles-container .up-next-articles-overlay.up-next-articles-overlay-left {
-  left: 0;
-  background-image: linear-gradient(to right, rgb(29, 29, 27), transparent);
-}
-.up-next-articles-container .up-next-articles-overlay.up-next-articles-overlay-right {
-  right: 0;
-  background-image: linear-gradient(to left, rgb(29, 29, 27), transparent);
-}
-.up-next-articles-container.show-left-overlay .up-next-articles-overlay-left, .up-next-articles-container.show-right-overlay .up-next-articles-overlay-right {
-  display: flex;
-}
-.up-next-articles-container .up-next-articles-scroll {
-  overflow-x: auto;
-  position: relative;
-  scrollbar-width: none;
-}
-.up-next-articles-container .up-next-articles {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(156px, 1fr));
-  -moz-column-gap: 24px;
-       column-gap: 24px;
-}
-@media (min-width: 1024px) {
-  .up-next-articles-container .up-next-articles {
-    gap: 24px 0;
-    grid-template-columns: 1fr;
-  }
-}
-.up-next-articles-container .up-next-articles .up-next-article {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  position: relative;
-}
-.up-next-articles-container .up-next-articles .up-next-article:not(:last-child)::after {
-  content: "";
-  position: absolute;
-  background-color: #222;
-  z-index: 1;
-  height: 100%;
-  width: 1px;
-  right: -12px;
-}
-@media (min-width: 1024px) {
-  .up-next-articles-container .up-next-articles .up-next-article:not(:last-child)::after {
-    height: 1px;
-    width: 100%;
-    left: 0;
-    bottom: -12px;
-  }
-}
-.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container {
-  position: relative;
-  margin-bottom: 12px;
-}
-.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-duration {
-  z-index: 2;
-  bottom: 0;
-  left: 10px;
-  position: absolute;
-}
-.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-image-overlay {
-  bottom: 0;
-  position: absolute;
-  width: 100%;
-  height: 50%;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
-  z-index: 1;
-}
-.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-image-container:hover .up-next-article-image-overlay {
-  opacity: 1;
-}

package/src/Article/UpNextArticles/UpNextArticles.tsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { Text } from '../../Text/Text';
-import './styles.css';
-
-interface UpNextArticlesProps {
-  upNextArticles: {
-    url: string;
-    headline: string;
-    duration?: string;
-    thumbnail: string;
-  }[];
-}
-
-/** Primary UpNextArticles UI component for user interaction */
-
-export const UpNextArticles: React.FC<UpNextArticlesProps> = ({
-  upNextArticles
-}) => {
-  if (!upNextArticles || upNextArticles.length === 0) {
-    return;
-  }
-
-  return (
-    <div className="video-article-up-next">
-      <div className="vertical-divider"></div>
-      <div className="up-next-articles-container show-right-overlay">
-        <Text as="h4" classes="video-heading video-category">
-          Up Next
-        </Text>
-        <div className="up-next-articles-overlay up-next-articles-overlay-left"></div>
-        <div className="up-next-articles-scroll">
-          <div className="up-next-articles">
-            {upNextArticles.map((up_next_article, index) => (
-              <div className="up-next-article" key={index}>
-                <a href={up_next_article.url}>
-                  <div className="up-next-article-image-container">
-                    <Text classes="up-next-article-duration video-heading">
-                      {up_next_article.duration}
-                    </Text>
-                    <div className="up-next-article-image-overlay"></div>
-                    <div className="up-next-article-image">
-                      {up_next_article.thumbnail !== '' && (
-                        <picture>
-                          <source
-                            srcSet={up_next_article.thumbnail}
-                            type="image/webp"
-                          />
-                          <img
-                            loading="lazy"
-                            src={up_next_article.thumbnail}
-                            alt={up_next_article.headline}
-                          />
-                        </picture>
-                      )}
-                    </div>
-                  </div>
-                  <Text as="span" classes="article-heading">
-                    {up_next_article.headline}
-                  </Text>
-                </a>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div className="up-next-articles-overlay up-next-articles-overlay-right"></div>
-      </div>
-    </div>
-  );
-};

package/src/Article/UpNextArticles/styles.css

@@ -1,151 +0,0 @@
-.video-article-container .video-article-up-next {
-  width: 100%;
-  background-color: rgb(29, 29, 27);
-  position: relative;
-}
-.video-article-container .video-article-up-next * {
-  width: 100%;
-}
-@media (min-width: 1024px) {
-  .video-article-container .video-article-up-next {
-    background-color: unset;
-    flex-shrink: 0;
-    width: 220px;
-    order: 0;
-  }
-}
-@media (min-width: 1320px) {
-  .video-article-container .video-article-up-next {
-    width: 270px;
-  }
-}
-.video-article-container .video-article-up-next .vertical-divider {
-  display: none;
-}
-@media (min-width: 768px) {
-  .video-article-container .video-article-up-next .vertical-divider {
-    position: absolute;
-    display: block;
-    height: 100%;
-    width: 1px;
-    background-color: #222;
-    margin: 0 32px;
-    left: -48px;
-  }
-}
-
-.up-next-articles-container {
-  padding: 20px;
-  position: relative;
-}
-@media (min-width: 768px) {
-  .up-next-articles-container {
-    padding: 24px;
-  }
-}
-@media (min-width: 1024px) {
-  .up-next-articles-container {
-    padding: 0;
-  }
-}
-.up-next-articles-container .up-next-article-image {
-  padding-bottom: 56.25%;
-  position: relative;
-  overflow: hidden;
-  background-color: #333;
-}
-.up-next-articles-container .up-next-article-image picture {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-.up-next-articles-container .up-next-article-image img {
-  max-width: 100%;
-}
-.up-next-articles-container .up-next-articles-overlay {
-  display: none;
-}
-@media (max-width: 1023px) {
-  .up-next-articles-container .up-next-articles-overlay {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    width: 75px;
-    z-index: 1;
-  }
-}
-.up-next-articles-container .up-next-articles-overlay.up-next-articles-overlay-left {
-  left: 0;
-  background-image: linear-gradient(to right, rgb(29, 29, 27), transparent);
-}
-.up-next-articles-container .up-next-articles-overlay.up-next-articles-overlay-right {
-  right: 0;
-  background-image: linear-gradient(to left, rgb(29, 29, 27), transparent);
-}
-.up-next-articles-container.show-left-overlay .up-next-articles-overlay-left, .up-next-articles-container.show-right-overlay .up-next-articles-overlay-right {
-  display: flex;
-}
-.up-next-articles-container .up-next-articles-scroll {
-  overflow-x: auto;
-  position: relative;
-  scrollbar-width: none;
-}
-.up-next-articles-container .up-next-articles {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(156px, 1fr));
-  -moz-column-gap: 24px;
-       column-gap: 24px;
-}
-@media (min-width: 1024px) {
-  .up-next-articles-container .up-next-articles {
-    gap: 24px 0;
-    grid-template-columns: 1fr;
-  }
-}
-.up-next-articles-container .up-next-articles .up-next-article {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  position: relative;
-}
-.up-next-articles-container .up-next-articles .up-next-article:not(:last-child)::after {
-  content: "";
-  position: absolute;
-  background-color: #222;
-  z-index: 1;
-  height: 100%;
-  width: 1px;
-  right: -12px;
-}
-@media (min-width: 1024px) {
-  .up-next-articles-container .up-next-articles .up-next-article:not(:last-child)::after {
-    height: 1px;
-    width: 100%;
-    left: 0;
-    bottom: -12px;
-  }
-}
-.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container {
-  position: relative;
-  margin-bottom: 12px;
-}
-.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-duration {
-  z-index: 2;
-  bottom: 0;
-  left: 10px;
-  position: absolute;
-}
-.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-image-overlay {
-  bottom: 0;
-  position: absolute;
-  width: 100%;
-  height: 50%;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
-  z-index: 1;
-}
-.up-next-articles-container .up-next-articles .up-next-article .up-next-article-image-container .up-next-article-image-container:hover .up-next-article-image-overlay {
-  opacity: 1;
-}

package/src/Button/Button.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import './styles.css';
-
-interface ButtonProps {
-  /** Is this the principal call to action on the page? */
-  primary?: boolean;
-  /** How large should the button be? */
-  size?: 'small' | 'medium' | 'large';
-  /** Button contents */
-  label: string;
-  /** Optional click handler */
-  onClick?: () => void;
-}
-
-/** Primary UI component for user interaction */
-export const Button: React.FC<ButtonProps> = ({
-  primary,
-  size,
-  label,
-  ...props
-}) => {
-  const mode = primary
-    ? 'storybook-button--primary'
-    : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(
-        ' '
-      )}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};

package/src/Button/styles.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}

package/src/CommentsDisabled/CommentsDisabled.stories.tsx

@@ -1,178 +0,0 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { CommentsDisabled } from './CommentsDisabled';
-
-/**
- * CommentsDisabled Component Storybook Stories
- * Showcases the component in various states and configurations
- */
-
-const meta: Meta<typeof CommentsDisabled> = {
-  title: 'Components/CommentsDisabled',
-  component: CommentsDisabled,
-  argTypes: {
-    heading: {
-      control: { type: 'text' },
-      description: 'Heading text for the disabled comments message'
-    },
-    contentText: {
-      control: { type: 'text' },
-      description: 'Content text before the guidelines link'
-    },
-    guidelinesUrl: {
-      control: { type: 'text' },
-      description: 'URL for the community guidelines link'
-    },
-    guidelinesLinkText: {
-      control: { type: 'text' },
-      description: 'Text for the community guidelines link'
-    },
-    className: {
-      control: { type: 'text' },
-      description: 'Additional CSS classes'
-    }
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Default
- * The default state of the CommentsDisabled component with all default text
- */
-export const Default: Story = {
-  args: {
-    heading: 'Comments are not enabled for this article',
-    contentText:
-      'Comments are subject to our community guidelines, which can be viewed',
-    guidelinesUrl: '/community-guidelines',
-    guidelinesLinkText: 'here'
-  }
-};
-
-/**
- * With Custom Heading
- * Demonstrates customizing the heading text
- */
-export const CustomHeading: Story = {
-  args: {
-    heading: 'Comments have been disabled for this story',
-    contentText:
-      'Comments are subject to our community guidelines, which can be viewed',
-    guidelinesUrl: '/community-guidelines',
-    guidelinesLinkText: 'here'
-  }
-};
-
-/**
- * With Custom Content
- * Demonstrates customizing the content text
- */
-export const CustomContent: Story = {
-  args: {
-    heading: 'Comments are not enabled for this article',
-    contentText:
-      'This article has discussions disabled to maintain editorial focus. Please review our',
-    guidelinesUrl: '/community-guidelines',
-    guidelinesLinkText: 'community standards'
-  }
-};
-
-/**
- * With External Link
- * Demonstrates opening the guidelines in a new window
- */
-export const ExternalLink: Story = {
-  args: {
-    heading: 'Comments are not enabled for this article',
-    contentText:
-      'Comments are subject to our community guidelines, which can be viewed',
-    guidelinesUrl: 'https://example.com/guidelines',
-    guidelinesLinkText: 'here'
-  }
-};
-
-/**
- * Minimal
- * Minimal version with shorter content
- */
-export const Minimal: Story = {
-  args: {
-    heading: 'Comments disabled',
-    contentText: 'See our',
-    guidelinesUrl: '/guidelines',
-    guidelinesLinkText: 'community guidelines'
-  }
-};
-
-/**
- * All Variations
- * Showcases different variations side-by-side
- */
-export const AllVariations: Story = {
-  render: () => (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '48px',
-        padding: '24px'
-      }}
-    >
-      <div>
-        <h2 style={{ marginBottom: '16px' }}>Default</h2>
-        <CommentsDisabled
-          heading="Comments are not enabled for this article"
-          contentText="Comments are subject to our community guidelines, which can be viewed"
-          guidelinesUrl="/community-guidelines"
-          guidelinesLinkText="here"
-        />
-      </div>
-
-      <div>
-        <h2 style={{ marginBottom: '16px' }}>With Custom Heading</h2>
-        <CommentsDisabled
-          heading="Comments have been temporarily disabled"
-          contentText="Comments are subject to our community guidelines, which can be viewed"
-          guidelinesUrl="/community-guidelines"
-          guidelinesLinkText="here"
-        />
-      </div>
-
-      <div>
-        <h2 style={{ marginBottom: '16px' }}>With Custom Content</h2>
-        <CommentsDisabled
-          heading="Comments are not enabled for this article"
-          contentText="This article has discussions disabled. Please review our"
-          guidelinesUrl="/community-guidelines"
-          guidelinesLinkText="community standards"
-        />
-      </div>
-
-      <div>
-        <h2 style={{ marginBottom: '16px' }}>Minimal</h2>
-        <CommentsDisabled
-          heading="Comments disabled"
-          contentText="See our"
-          guidelinesUrl="/guidelines"
-          guidelinesLinkText="guidelines"
-        />
-      </div>
-    </div>
-  )
-};
-
-/**
- * Interactive
- * Interactive story showing all customizable props
- */
-export const Interactive: Story = {
-  args: {
-    heading: 'Comments are not enabled for this article',
-    contentText:
-      'Comments are subject to our community guidelines, which can be viewed',
-    guidelinesUrl: '/community-guidelines',
-    guidelinesLinkText: 'here'
-  }
-};